<template>
  <div class="page">
    <div class="header">
      <el-page-header @back="goBack" content="配合单位打分"></el-page-header>
    </div>
    <div class="main">
      <div class="subnav">
          <div class="searchLeft">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width:295px;"
          ></el-input>
          <button>搜索</button>
        </div>
        <div class="searchRight">
          <span>任务名称</span>
          <el-select v-model="value" placeholder="请选择" size="medium">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-select v-model="value" placeholder="请选择" size="medium">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list" id="groupingScore">
        <el-scrollbar class="page-component__scroll" style="height:100%">
          <div style="height:600px;">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              height="600"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="日期">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column prop="name" label="姓名"> </el-table-column>
              <el-table-column
                prop="address"
                label="地址"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column align="right">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini">打分</el-button>
                  <el-button type="success" size="mini" @click="dataRemark(scope.row)">备注</el-button>
                  
                  <!--  <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
      </div>
      <div class="laypage">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 弹出备注输入框 -->
    <el-dialog title="备注" :visible.sync="dialogVisible" width="30%" center>
      <el-input
        type="textarea"
        :rows="8"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>

      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
     tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      dialogVisible:false,
    };
  },
  methods: {
    goBack() {
      this.$router.push("/indicatorsList");
    },
     // 编写备注
    dataRemark() {
      this.dialogVisible = true;
    }


  }
};
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.header {
  float: left;
  width: 100%;
  height: 42px;
  text-align: left;
  background: rgb(252, 248, 248);
}
.main {
  width: 100%;
  height: 100%;
  padding-top: 42px;
  background: #fff;
}
.subnav {
  float: left;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 20%;
}
.searchLeft {
  float: left;
  width: 400px;
  /* height: 40px; */
}
.searchLeft > button {
  width: 100px;
  height: 40px;
  background: #409eff;
  color: #fff;
  border: 0px;
  font-size: 16px;
  text-align: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  position: relative;
  left: -8px;
  top: 1px;
}
.searchRight {
  float: left;
  width: auto;
}
.searchRight > span {
  display: inline-block;
  width: 80px;
  height: auto;
  font-size: 14px;
  text-align: center;
  margin-left: 20px;
}

.list {
  width: 100%;
  height: 100%;
  padding-top: 60px;
  padding-bottom: 60px;
}
.laypage {
  width: 100%;
  height: 60px;
  position: relative;
  top: -60px;
  text-align: right;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.page-component__scroll {
  height: 100%;
}



</style>

<style>
#groupingScore  .el-scrollbar__wrap{
   overflow: visible;
    overflow-y: scroll;
}
</style>